<template>
  <div class="container">
    <van-nav-bar fixed border :title="title" left-text="取消" @click-left="$router.go(-1)" left-arrow>
      <template #right>
        <van-icon name="search" size="18" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>
    <div class="neirong">
      <div class="him"><img :src="Img" @click="$router.push(`/autor/${name}`)" />我是{{name}}，你好呀</div>
      <div class="my" v-for="(val,i) in list" :key="i"><img src="@/assets/touxiang/t1.jpg" />{{val}}</div>
    </div>
    <div class="wenzhang">
      <van-field v-model="message"
                 rows="2"
                 type="textarea"
                 placeholder="请输入留言"
                 show-word-limit>
        <template #button>
          <van-button size="small" type="primary" @click="sendmsg">发送</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShareText',
  data () {
    return {
      message: '',
      name: this.$route.params.name,
      Img: ''
    }
  },
  methods: {
    sendmsg () {
      if (this.message.trim().length !== 0) {
        this.$store.commit('addChat', { name: this.name, message: this.message })
        this.message = ''
        window.scroll(9999, 9999)
      } else {
        this.$toast.fail('请输入内容')
      }
    }
  },
  computed: {
    list () {
      var user = this.$store.state.chath.find(val => val.name === this.name)
      return user.message
    },
    title () {
      return `与${this.name}的聊天`
    },
    autorinfo () {
      return this.$store.state.autorlist.find(val => val.name === this.name).photo
    }
  },
  created () {
    var p = this.autorinfo
    this.Img = require('@/assets/touxiang/' + p)
  }
}
</script>

<style scoped lang="less">
  .wenzhang {
    position: fixed;
    bottom: 0;
    width: 100%;
    .van-cell:nth-child(2)
  {
    height: 500px;
    .van-field__body{
              height:500px!important;
            }
  }
  }
  .neirong {
    position: relative;
    top: 150px;
    font-size:38px;
    padding:20px 120px;
    div{
            box-shadow:2px 2px 6px 6px #e8e8e8;
            border-radius:15px;
            height:90px;
            margin-bottom:50px;
            padding:30px;
            position:relative;
            font-size:25px;
        }
    .him{
        img{
               width:15%;
               position:absolute;
               left:-100px;
           }
    }
  .my {
    img
  {
    width: 15%;
    position: absolute;
    right: -100px;
  }

  }
  div:last-child{
      margin-bottom:150px;
  }
  }
</style>
